import React, { useState, useEffect } from "react";
import {
    Form,
    Input,
    Button,
    Table,
    Popconfirm,
    Space,
    Select,
    DatePicker,
    Modal,
    Upload,
} from "antd";
import "./Tenant_billing_management.scss";
import http from "../../utils/http";
import { AddTenant_billing_management } from "./AddTenant_billing_management/AddTenant_billing_management";
import { XqsetTenant_billing_management } from "./AddTenant_billing_management/XqsetTenant_billing_management";
// import "./AddTenant_billing_management/AddTenant_billing_management";
import ImgCrop from "antd-img-crop";

// import Search from "antd/lib/input/Search";
const { Option } = Select;

export default function Tenant_billing_management() {
    // 处理后端的时间戳
    function getLocalTime(n) {
        return new Date(parseInt(n)).toLocaleString().replace(/:\d{1,2}$/, " ");
    }
    // 获取租户账单的数据
    const [data, setData] = useState([]);
    useEffect(() => {
        http({
            url: "/tenantbills/findTenantbills",
            // mothed: "post",
        }).then((res) => {
            if (res.code == 200) {
                let arr = res.data.map((v, i) => {
                    return {
                        key: v.tenId,
                        perName: v.perName,
                        ten_billNumber: v.ten_billNumber,
                        tenType: v.tenType,
                        tenNum: v.tenNum,
                        tenMoney: v.tenMoney,
                        tenCreatetime: getLocalTime(v.tenCreatetime),
                        tenGive: getLocalTime(v.tenGive),
                    };
                });
                setData(arr);
            }
            console.log("租户账单数据", res.data);
        });
    }, []);
    // 表格数据渲染区域
    const columns = [
        {
            title: "租户名称",
            dataIndex: "perName",
            render: (text) => <a>{text}</a>,
        },
        {
            title: "账单编号",
            dataIndex: "ten_billNumber",
        },
        {
            title: "账单类型",
            dataIndex: "tenType",
        },
        {
            title: "使用量",
            dataIndex: "tenNum",
        },
        {
            title: "单价",
            dataIndex: "tenMoney",
        },
        {
            title: "出账时间",
            dataIndex: "tenCreatetime",
        },
        {
            title: "续费时间",
            dataIndex: "tenGive",
        },
        // 表格后面的操作区域
        {
            title: "操作",
            dataIndex: "operation",
            render: (text, record) => (
                <Space size="middle">
                    <a
                        onClick={() => {
                            openEditBox(text, record);
                        }}
                    >
                        详情
                    </a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={() => {
                            confirm(text, record);
                        }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    // 新增跳转
    const [isTenant_billing_management, setTenant_billing_management] =
        useState(false);
    const xinzeng = () => {
        setTenant_billing_management(true);
    };
    // 新增跳转
    const [isXqTenant_billing_management, setXqTenant_billing_management] =
        useState(false);
    const openEditBox = () => {
        setXqTenant_billing_management(true);
    };
    // 下来按钮的方法
    const handleChange = (value) => {
        // message.info("Click on menu item.");
        console.log(`selected ${value}`);
    };
    // const callback = (key) => {
    //     console.log(key);
    // };
    const [form] = Form.useForm();

    // 批量删除方法
    const resize = () => {
        console.log("批量删除方法");
    };
    // 查询方法
    const chaxun = () => {
        console.log("查询方法");
    };
    //重置方法
    const chongzhi = () => {
        console.log("重置方法");
    };

    // 操作里面的删除方法
    function cancel(e) {}
    function confirm(a, b) {
        // http({
        //     url:'/admin/deladmin',
        //     method:'post',
        //     data:{
        //         id:b.id
        //     }
        // }).then((res)=>{
        //     console.log(res);
        // })
    }

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                "selectedRows: ",
                selectedRows
            );
        },
        getCheckboxProps: (record) => ({
            // disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    // 新增模态框的显示与隐藏以及数据的操作
    const [isModalVisible, setIsModalVisible] = useState(false);
    // 详情模态框的显示与隐藏以及数据的操作

    const [isModalVisible1, setIsModalVisible1] = useState(false);

    const Add = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const handleOk1 = () => {
        setIsModalVisible1(false);
    };

    const handleCancel1 = () => {
        setIsModalVisible1(false);
    };

    // 上传照片
    const [fileList, setFileList] = useState([
        {
            uid: "-1",
            name: "image.png",
            status: "done",
            url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        },
    ]);

    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async (file) => {
        let src = file.url;
        if (!src) {
            src = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };
    // 表单区域
    const [componentSize, setComponentSize] = useState("default");
    const onFormLayoutChange = ({ size }) => {
        setComponentSize(size);
    };
    if (isTenant_billing_management) {
        // 新增页面
        return (
            <div className="roleContent">
                <AddTenant_billing_management
                    setTenant_billing_management={setTenant_billing_management}
                ></AddTenant_billing_management>
            </div>
        );
    } else if (isXqTenant_billing_management) {
        return (
            <div className="roleContent">
                <XqsetTenant_billing_management
                    setXqTenant_billing_management={
                        setXqTenant_billing_management
                    }
                ></XqsetTenant_billing_management>
            </div>
        );
    }

    return (
        <div className="roleContent">
            {/* 头部信息区域 */}
            <Form
                form={form}
                name="horizontal_login"
                layout="inline"
                className="title"
            >
                <Form.Item name="username">
                    <div className="kuai">
                        <span></span>
                        <span>租户账单管理</span>
                    </div>
                </Form.Item>
                <Form.Item className="btn">
                    <div className="btn_btn">
                        <Button
                            className="cha"
                            type="primary"
                            onClick={xinzeng}
                        >
                            新增
                        </Button>
                        <Button
                            className="resize"
                            onClick={resize}
                            type="primary"
                        >
                            批量删除
                        </Button>
                    </div>
                </Form.Item>
            </Form>
            <div className="biao ">
                {/* 搜索筛选区域 */}
                <Form
                    form={form}
                    name="horizontal_login"
                    layout="inline"
                    className="Role"
                >
                    <Form.Item
                        className="warpp"
                        name="username"
                        label="设备名称"
                    >
                        <Input placeholder="请输入设备名称" />
                    </Form.Item>
                    <Form.Item
                        className="warpp"
                        name="username"
                        label="设备编号"
                    >
                        <Input placeholder="请输入设备编号" />
                    </Form.Item>
                    <Form.Item
                        className="warpp"
                        name="username"
                        label="运行状态"
                    >
                        <Select
                            defaultValue="请选择"
                            style={{ width: 166.4 }}
                            onChange={handleChange}
                        >
                            <Option value="请选择" disabled>
                                请选择
                            </Option>
                            <Option value="临时车">临时车</Option>
                            <Option value="包月车">包月车</Option>
                            <Option value="园区车">园区车</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item className="btn warpp">
                        <div>
                            <Button
                                className="cha"
                                type="primary"
                                onClick={chaxun}
                            >
                                查询
                            </Button>
                            <Button
                                className="resize"
                                onClick={chongzhi}
                                type="primary"
                            >
                                重置
                            </Button>
                        </div>
                    </Form.Item>
                    <Form.Item
                        className="warpp warpp1"
                        name="username"
                        label="缴费时间"
                    >
                        <DatePicker className="width_centent" />
                    </Form.Item>
                    <Form.Item
                        className="warpp warpp1"
                        name="username"
                        label="出账时间"
                    >
                        <DatePicker className="width_centent" />
                    </Form.Item>
                    <Form.Item
                        className="warpp  warpp1"
                        name="username"
                        label="账户类型"
                    >
                        <Select
                            defaultValue="请选择"
                            style={{ width: 166.4 }}
                            onChange={handleChange}
                        >
                            <Option value="请选择" disabled>
                                请选择
                            </Option>
                            <Option value="水费">水费</Option>
                            <Option value="电费">电费</Option>
                            <Option value="物业费">物业费</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item className="warpp  warpp1"></Form.Item>
                </Form>
                <Table
                    className="table1"
                    rowSelection={{
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={data}
                />
            </div>
        </div>
    );
}
